<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    position: absolute;
    width: 400px;
    height: 400px;
    margin: 200px 500px;
  }

  #tx {
    line-height: 50px;
    width: 300px;
    height: 50px;
    font-size: 18px;
    resize: vertical;
    color: black;
  }

  p {
    position: relative;
    bottom: 35px;
    left: 250px;
    font-size: 14px;
    display: none;
  }

  button {
    position: relative;
    bottom: 20px;
    right: 4px;
    width: 50px;
    height: 55px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgb(105, 197, 234);
    color: white;
    background-color: rgb(85, 184, 224);
    align-self: flex-start;
  }

  #tx:focus {
    height: 80px;
    transition: all 0.4s;
  }

  .minbox {
    display: none;
    width: 400px;
    height: 120px;
    border: 1px solid gray;
  }

  .minbox h5 {
    float: left;
    width: 100%;
    font-weight: normal;
    /* margin-top: -10px; */
    color: rgb(235, 129, 147)
  }

  h4 {
    float: left;
    width: 100%;
    margin-top: -10px;
    font-weight: normal;
  }

  h3 {
    float: left;
    font-size: 14px;
    color: gray;
    width: 100%;
    margin-top: -10px;
    font-weight: normal;
  }
</style>

<body>
  <div class="box">
    <textarea placeholder="请文明发言" id="tx"></textarea>
    <button>发布</button>
    <p>0/500字</p>
    <div class="minbox">
      <h5 class="zi">玉小刚</h5>
      <h4>阿圣诞节啊三等奖阿九</h4>
      <h3>2022-10-19</h3>
    </div>
  </div>
  <script>
    const p = document.querySelector('p')
    const tx = document.querySelector('#tx')
    const box = document.querySelector('.box')
    const button = document.querySelector('button')
    const minbox = document.querySelector('.minbox')
    const h4 = document.querySelector('h4')
    tx.addEventListener('focus', function () {
      p.style.display = 'block'
      button.style.height = '80px'
    })
    tx.addEventListener('blur', function () {
      p.style.display = 'none'
      button.style.height = '55px'
      minbox.style.display = 'none'
    })
    tx.addEventListener('input', function () {
      p.innerHTML = `${tx.value.length}/200字`
    })
    tx.addEventListener('keyup', function (e) {
      // minbox.style.display = 'block'
      // h4.innerHTML = `${tx.value}`
      if (e.key === 'Enter') {
        minbox.style.display = 'block'
        h4.innerHTML = `${tx.value}`
        tx.value = ''
        p.innerHTML = '0/200字'
      }
    })
  </script>
</body>

</html>